<template>
    <div>
      <nut-swiper
          direction="horizontal"
          :swiperData="dataImgItem"
          :lazyLoad="true"
          :paginationVisible="true"
          ref="demo5"
          :autoPlay="3000"
      >
        <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">

          <img :data-src="item.imgSrc"   style="max-width:100%; max-height:100%" class="nut-img-lazyload"/>
        </div>
      </nut-swiper>
    </div>
</template>

<script>
export default {
  name: "Banner",
  data:()=>({
    dataItem: [],
    dataImgItem: [],
    newCurrentPage: 1
  }),
  mounted() {
        let that=this;
        let url='http://localhost:5000';
        this.$http.get(url+'/data/HeaderBanner.json')
        .then(function (response) {
          setTimeout(()=>{
            let dataItem = []
            response.data.Banner.forEach((item,i)=>{
              dataItem.push({
                name:i+1
              })
            })
            that.dataItem=dataItem
            that.dataImgItem=response.data.Banner.map(i=>({
              imgSrc:url+i['img']
            }));
          },300)

        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // always executed
        });


  },
  methods: {
    slideChangeEnd(page) {
      console.log(page);
    },
    slideMove(page) {
      console.log(page);
    },
    slideChangeStart(page) {
      console.log(page);
    },
    add() {

      this.newCurrentPage = this.newCurrentPage + 1;
    },
    sub() {
      this.newCurrentPage = this.newCurrentPage - 1;
    }
  },
  watch:{
    dataImgItem(){
      setTimeout(()=>{

        this.$nextTick(()=>{
          let img=Array.from(this.$refs.demo5.$el.querySelectorAll('img')).pop()
          img.src=img.attributes['data-src'].value
          // console.log(img.attributes['data-src'])
        })
      },1000);
    }
  }
}
</script>

<style scoped>
.nut-swiper.horizontal{
  height: 9.875rem !important;
}
.nut-swiper-slide img{
  border-radius: .5rem;
  width:  calc(100% - .7rem - .7rem);
  height: calc(10.375rem - 0.625rem - 0.625rem - 0.375rem);
  margin: 0.625rem .7rem;
}
</style>